<template>
  <div class="interaction-seescore">
    <crumb />
    <div class="container">
      <div class="box-left">
        <div class="section">
          <div class="title">
            {{seeScoreData.resourceCaseName}}<div class="sm-group"><span class="sm">平均分:{{seeScoreData.score}}分</span></div>
          </div>
          <div class="content">
            {{seeScoreData.requestEn}}
          </div>
        </div>
        <div class="section">
          <div class="title">
            实训小组
          </div>
          <div class="list-box">
            <ul>
              <!-- （其他小组）对本小组评分 -->
              <li v-for="(item, index) in seeScoreData.groupIndex" :key="index" @click="nodeByMarkDetail(item.caseScoreId)">{{item.stuGroupName}}<span class="right-arrow">{{item.totalScore}}分></span></li>
            </ul>
          </div>
        </div>
      </div>
      <div class="box-right">
        <div class="title">
          评分明细
        </div>
        <div class="section">
          <div class="row" v-for="(item, index) in scoreDetail" :key="index">
            <div class="label">{{item.evaluateItem}}</div>
            <div class="value">{{item.evaluateItemScore}}分</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { nodeByMark, nodeByMarkDetail } from '@/api/student/training/interaction'
export default {
  name: 'interaction-seescore',
  data () {
    return {
      seeScoreData: '',
      scoreDetail: ''
    }
  },
  components: {
  },
  async mounted () {
    await this.nodeByMark()
    if (this.seeScoreData.groupIndex.length > 0) {
      this.nodeByMarkDetail(this.seeScoreData.groupIndex[0].caseScoreId)
    }
  },
  methods: {
    // 环节被评分列表
    async nodeByMark () {
      let res = await nodeByMark(
        {
          lessonICaseId: this.$route.query.lessonICaseId, // 课程案例id
          caseNodeId: this.$route.query.caseNodeId, // 节点id
          groupId: this.$route.query.groupId // 我的学生小组id
        }
      )
      console.log(res)
      if (res.code === '200') {
        this.seeScoreData = res.data
      } else {
        this.$message.error(res.message)
      }
    },
    // 环节被评分明细
    async nodeByMarkDetail (caseScoreId) {
      let res = await nodeByMarkDetail(
        {
          caseScoreId: caseScoreId, // 评分表id
          caseNodeId: this.seeScoreData.caseNodeId // 节点id
        }
      )
      console.log(res)
      if (res.code === '200') {
        this.scoreDetail = JSON.parse(res.data.scoreDetail)
      } else {
        this.$message.error(res.message)
      }
    }
  }
}
</script>
<style scoped lang="scss" rel="stylesheet/scss">
.interaction-seescore {
  .container {
    display: flex;
    justify-content: space-between;
    .box-left {
      width: 630px;
      background: #fff;
      padding: 15px;
      .section {
        .title {
          font-size: 14px;
          font-weight: bold;
          position: relative;
          .sm-group {
            position: absolute;
            right: 0;
            top: 0;
            font-size: 12px;
            font-weight: initial;
            color: #828282;
          }
        }
        .content {
          color: #BBBBBB;
          font-size: 14px;
          padding:20px 0;
          line-height: 1.2;
        }
        .list-box {
          margin-top: 20px;
          ul {
            li {
              line-height: 60px;
              font-size: 14px;
              border-bottom: 1px solid #f5f5f5;
              padding: 0 10px;
              position: relative;
              cursor: pointer;
              &:hover {
                background: #f5f5f5;
              }
              .right-arrow {
                position: absolute;
                right: 10px;
              }
            }
          }
        }
      }
    }
    .box-right {
      width: 550px;
      min-height: 100%;
      background: #fff;
      padding: 15px;
      box-sizing: border-box;
      .title {
        font-size: 14px;
        font-weight: bold;
        position: relative;
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-bottom: 40px;
      }
      .row {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-bottom: 55px;
      }
    }
  }
}

</style>
